<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: hucc
 * @LastEditTime: 2021-09-23 20:08:55
-->
<template>
  <!-- 2.创建容器 容纳图表 -->
  <div ref="root" style="height: 150px"></div>
</template>
<script>
import { Funnel } from "@antv/g2plot";
export default {
  data() {},
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      let funnel = new Funnel(this.$refs["root"], {
        data: [
          { stage: "网上咨询办理", number: 253 },
          { stage: "线下办理", number: 151 },
          { stage: "访问办理", number: 113 },
          { stage: "邮件办理", number: 87 },
          { stage: "电话办理", number: 59 },
        ],
        xField: "stage",
        yField: "number",
        legend: false,
        shape: "pyramid",
      });
      funnel.render();
    },
  },
};
</script>